<template>
	<view id="voteStatus">
		<view class="vote-status-wrap">
			<view class="vote-title">{{voteDetailInfo.community_name}}
				{{
				voteType == 2 && voteDetailInfo.vote_type == 1 ? '筹备组成员投票' 
			  : voteType == 2 && voteDetailInfo.vote_type == 3 ? '工作组成员投票' 
		      : '委托人成员投票'}}
			</view>
			<view class="vote-title sub-title">
				投票时间：{{voteDetailInfo.preparations_vote_start_time}}~{{voteDetailInfo.preparations_vote_end_time}}
			</view>
			<view class="vote-title sub-title">注：每人有1票，最多可投{{voteDetailInfo.preparations_number}}票</view>
			<ul class="group-person" v-for="(item, index) in voteUserList">
				<li>
					<image class="vote-img" src="/static/image/underReview.png"></image>
					<view class="vote-name">
						<view class="">姓名：{{ item.full_name }}</view>
						<view class="">楼号：{{ item.building_number }}</view>
						<view class="">票数：{{ voteType == 2 ? item.preparation_total : item.committee_member_total}}
						</view>
					</view>
				</li>
				<!-- -->
				<view style="float: right;margin-top: -84px;margin-right: 24px;"
					v-if="!item.whetherVote && canVoteState == 0  && alreadyVoteTotal == 0">
					<view class="vote-btn" @click="handleAdd(item,index)">推荐</view>
				</view>
				<view v-if="item.whetherVote" @click="cancelAdd(item,index)"
					style="float: right;margin-top: -84px;margin-right: 24px;">
					<view class="vote-vote">已推荐</view>
				</view>
			</ul>
		</view>
		<br><br><br><br>
		<view class="bottom-btn" v-show="alreadyVoteTotal == 0">
			<view class="submit-vote" @click="confirmAddVote">
				确认投票
			</view>
		</view>
		<!-- 用户认证 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isCertification" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							未提交认证
						</view>
						<view class="meeting-start">
							<image class="img" src="../../../static/vote/seconded.png"></image>
						</view>
						<view class="meeting-cont">
							请先进行实名认证后进行附议
						</view>
						<view class="meeting-btn" @click="submit()">
							提交认证
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 确认投票弹窗 -->
		<view class="modal" v-if="confirm">
			<view class="modal-cont">
				<view class="modal-title">确认投票</view>
				<view style="color: #000000;margin-top: 30px;">
					是否确认投票
				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="confirm = false">关闭</view>
					<view class="btn-sure" @click="addVote()">确定</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: ['id', 'voteType'],

		data() {
			return {
				voteId: this.id || null,
				voteDetailInfo: {}, //表决详情
				voteUserList: [], //
				isCertification: false, //用户认证
				voteUserInfo: {}, //操纵人认证信息
				centert: {}, //选中的投票对象
				checkIndex: null, //选中的投票对象下标
				nowTimeStr: null,
				canVoteState: 0, //0.可投票 1.不可投票
				checkVoteTotal: 0, //选择的投票数量
				alreadyVoteTotal: 0, //已投票数量

				esenInfoCdo: {},
				homelist: {},
				address: null,
				confirm: false,

			}
		},

		mounted() {
			//获取选择人集合
			this.getVoteUserList();
			//表决详情
			this.getVoteDetailInfoById();
			//人员详情
			this.getVoteUserInfo();
			this.getNowTimeStr();
			this.verifyVoteTotal();
		},

		methods: {
			//校验是否投过票
			verifyVoteTotal() {
				var type = this.voteType == 2 ? 1 : this.voteType;
				this.$requestYz.api.verifyVoteTotal({
					essential_information_id: this.id,
					voteType: type,
					user_id: uni.getStorageSync('rawData').userId,
				}).then(res => {
					this.alreadyVoteTotal = res.data.data.data
				})
			},
			//确认投票
			confirmAddVote() {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.checkVoteTotal == 0) {
					this.$refs.uToast.show({
						title: '请选择投票对象',
						type: 'warning',
						icon: false
					})
					return;
				}
				var type = this.voteType == 2 ? 1 : this.voteType;
				this.voteUserList.forEach((item, index) => {
					if (item.whetherVote == true) {
						this.$requestYz.api.ownerVote({
							id: item.id,
							user_id: uni.getStorageSync('rawData').userId,
							user_name: this.voteUserInfo.full_name,
							voteType: type, //1.筹备组||工作组投票 7.委托人投票
							user_building_number: this.voteUserInfo.building_number //投票人房间信息
						}).then(res => {})
					}
					if (index == this.voteUserList.length - 1) {
						uni.showToast({
							title: '投票成功！',
							icon: 'success'
						});
						let that = this;
						setTimeout(function() {
							that.alreadyVoteTotal = 1
							that.checkVoteTotal = 0;
							that.getVoteUserList();
						}, 1000);
					}
				});
			},
			getNowTimeStr() {
				var date = new Date(),
					year = date.getFullYear(); //年
				var month = date.getMonth() + 1; //月
				var day = date.getDate()
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				this.nowTimeStr = year + "-" + month + "-" + day;
			},

			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.voteId,
					user_id: uni.getStorageSync('rawData').userId,
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			//提交认证
			submit() {
				this.isCertification = false;
				uni.navigateTo({
					url: './submitAuth?vote_id=' + this.voteId + "&proName=" + this.voteDetailInfo.community_name
				})
			},
			//获取人列表
			getVoteUserList() {
				var type = this.voteType == 2 ? 1 : this.voteType;
				this.$requestYz.api.getOwnerAppVoteUserList({
					essential_information_id: this.id,
					voteType: type,
					user_id: uni.getStorageSync('rawData').userId,
				}).then(res => {
					this.voteUserList = res.data.data.datalist;
				})
			},
			//获取投票详情
			getVoteDetailInfoById() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.voteId,
				}).then(res => {
					if (res.data.data.voteInfo) {
						this.voteDetailInfo = res.data.data.voteInfo;
						this.getTimeVerify();
					}
				})
			},
			getTimeVerify() {
				this.getNowTimeStr();
				let start = new Date(Date.parse(this.voteDetailInfo.preparations_vote_start_time.replace(/-/g, "/")));
				let end = new Date(Date.parse(this.voteDetailInfo.preparations_vote_end_time.replace(/-/g, "/")));
				let now = new Date(Date.parse(this.nowTimeStr.replace(/-/g, "/")));
				if (start > now) {
					this.canVoteState = 1
				} else {
					this.canVoteState = 0
				}
			},
			cancelAdd(item, index) {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList[index].whetherVote = false;
				this.voteUserList[index].preparation_total = this.voteUserList[index]
					.preparation_total - 1
				this.checkVoteTotal = this.checkVoteTotal - 1;
			},
			handleAdd(item, index) {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.voteDetailInfo.preparations_number == this.checkVoteTotal) {
					this.$refs.uToast.show({
						title: '可投票数已达上限',
						type: 'warning',
						icon: false
					})
					return;
				}
				// this.nowTimeStr = "2022-11-27"
				this.getNowTimeStr();
				let start = new Date(Date.parse(this.voteDetailInfo.preparations_vote_start_time.replace(/-/g, "/")));
				let end = new Date(Date.parse(this.voteDetailInfo.preparations_vote_end_time.replace(/-/g, "/")));
				let now = new Date(Date.parse(this.nowTimeStr.replace(/-/g, "/")));
				if (start > now) {
					this.$refs.uToast.show({
						title: '投票未开始',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (end < now) {
					this.$refs.uToast.show({
						title: '投票已结束',
						type: 'warning',
						icon: false
					})
					return;
				}


				if (!this.voteUserInfo.id || !this.voteUserInfo.building_number) {
					this.isCertification = true
					return
				}
				this.checkIndex = index;
				this.centert = item
				this.confirm = true
			},

			addVote() {
				this.voteUserList[this.checkIndex].whetherVote = true;
				this.voteUserList[this.checkIndex].preparation_total = this.voteUserList[this.checkIndex]
					.preparation_total + 1
				this.checkVoteTotal = this.checkVoteTotal + 1;
				this.confirm = false
			},
		}
	}
</script>

<style lang="scss">
	$color: #999;
	$bold: bold;

	/*弹框*/
	.meeting-dialog {
		position: relative;

		::v-deep .u-mode-center-box {
			width: 670rpx !important;
			height: 800rpx;
			background: #FFFFFF !important;
			border-radius: 12rpx !important;
		}

		.meeting-wrap {
			padding: 40rpx;
		}

		.meeting-title {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 20px;
			border-bottom: 1px solid #E7ECE1;
		}

		.meeting-start {
			margin: 40rpx 0 24rpx;
			font-size: 16px;
			font-weight: bold;

			.img {
				width: 160px;
				height: 114px;
				margin: 0 auto;
				transform: translate(74px, 8px);
			}
		}

		.meeting-cont {
			color: red;
			font-size: 32rpx;
			border-bottom: 60rpx;
			margin-top: 50rpx;
			margin-bottom: 120rpx;
			text-align: center;
		}

		.succ {
			color: #333300;
			font-weight: bold;
		}

		.meeting-btn {
			width: 350rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 22px;
			border: 1px solid #427705;
			text-align: center;
			color: #427705;
			margin: 40px auto;
			font-weight: bold;
		}
	}

	#voteStatus {
		.vote-status-wrap {
			.vote-title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx auto 0;
				text-align: center;
			}

			.sub-title {
				font-size: 28rpx;
				margin: 20rpx auto 40rpx;
				font-weight: $bold;
				color: $color;
			}
		}

		.group-person li {
			width: 690rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 12px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
		}

		.vote-img {
			width: 116rpx;
			height: 140rpx;
			margin-left: 30rpx;
		}

		.vote-name {
			margin-left: 40rpx;
			font-weight: bold;
		}

		.vote-btn {
			margin-left: 26rpx;
			width: 176rpx;
			height: 60rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			text-align: center;
			line-height: 62rpx;
			color: #fff;
		}

		.vote-vote {
			margin-left: 26rpx;
			width: 176rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			text-align: center;
			border: 1px solid #CCCCCC;
			color: #999;
		}

		.bottom-btn {
			width: 100%;
			height: 108rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;

			.submit-vote {
				width: 570rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 44rpx;
				margin: 12rpx auto;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
			}
		}

		.modal {
			/* width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 999; */
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10;
		}

		.modal-cont {
			width: 610rpx;
			// min-height: 420rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.modal-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 67rpx;
		}

		.modal-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 45rpx;
			margin-top: 22rpx;
		}

		.modal-content {
			width: 443rpx;
			// height: 88rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 24rpx;
		}

		.text-area {
			margin-top: 24rpx;
			width: 520rpx;
			padding: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			max-height: 105rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
		}

		.modal-bottom {
			width: 100%;
			height: 84rpx;
			border-top: 1rpx solid #e6e9ed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
		}

		.btn-cancel {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			border-right: 1rpx solid #d8d8d8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-cancel1 {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			/* border-right: 1rpx solid #d8d8d8; */
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-sure {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #578ef0;
		}
	}
</style>